//车辆设施
var vm = new Vue({
    el: '#app',
    data: function() {
        return {
            actVehicleType: {
                value: '',
                text: ''
            },
            vehicleType: [{
                value: '0',
                text: '防撞车'
            }, {
                value: '1',
                text: '清障车'
            }, {
                value: '2',
                text: '清扫车'
            }, {
                value: '3',
                text: '洒水车'
            }, {
                value: '4',
                text: '道路巡检车'
            }],
            vehicleCountCate: [],
            vehicleCountData: [],
            vehicleTypeCate: [], //'运行', '静止', '离线'
            vehicleTypeData: []
        }
    },
    mounted: function() {
        var that = this;
        mui.init({});
        mui.ready(function() {
            $.ajax({
                url:"insertLog",
                data:{"type":"vehicle"},
                type:"post",
                dataType:"json",
                success : function(){}
            });
            //初始化车辆数目图表
            var myChartCount = echarts.init(document.getElementById('vehicle-count'));
            loading.show();
            $.getJSON('/define/getCarFacInfoChart', {}, function(res) {
                that.vehicleCountCate = res.nameArray;
                that.vehicleCountData = res.dataList
                // 车辆数目图表的配置项和数据
                var optionCount = {
                    title: false,
                    legend: {
                        orient: 'horizontal',
                        left: 'center',
                        data: that.vehicleCountCate
                    },
                    series: [{
                        name: '车辆数目',
                        type: 'pie',
                        radius: '45%',
                        center: ['50%', '60%'],
                        color: ['#58B7FF', '#f76a6a', '#8492A6', '#5cadff', '#ae2be4', '#657180'],
                        data: that.vehicleCountData,
                        labelLine: {
                            normal: {
                                length: 5
                            }
                        },
                        itemStyle: {
                            normal: {
                                label: {
                                    show: true,
                                    formatter: '{c}辆'//{b} :{d}%
                                },
                                labelLine: {
                                    show: true
                                }
                            },
                            emphasis: {
                                shadowBlur: 10,
                                shadowOffsetX: 0,
                                shadowColor: 'rgba(0, 0, 0, 0.5)'
                            }
                        }
                    }]
                };
                myChartCount.setOption(optionCount); //初始化车辆数目
                loading.hide();
            })

        })
    },
    methods: {
        bindSetVehicleType: function() {
            var that = this;

            var vehiclePicker = new mui.PopPicker();
            vehiclePicker.setData(that.vehicleType);
            vehiclePicker.show(function(val) {
                that.actVehicleType = {
                    value: val[0].value,
                    text: val[0].text
                }
                that.getData(val[0].text, function(res) {
                    that.vehicleTypeCate=res.nameArray;
                    that.vehicleTypeData=res.dataList;
                    //初始化车辆类型图表
                    var myChartType = echarts.init(document.getElementById('vehicle-type'));
                    // 车辆类型图表的配置项和数据
                    var optionType = {
                        title: false,
                        legend: {
                            orient: 'horizontal',
                            left: 'center',
                            data: that.vehicleTypeCate
                        },
                        series: [{
                            name: '车辆类型',
                            type: 'pie',
                            radius: '45%',
                            center: ['50%', '60%'],
                            color: ['#58B7FF', '#f76a6a', '#8492A6', '#5cadff', '#ae2be4', '#657180'],
                            data: that.vehicleTypeData,
                            labelLine: {
                                normal: {
                                    length: 5
                                }
                            },
                            itemStyle: {
                                normal: {
                                    label: {
                                        show: true,
                                        formatter: '{c}辆'//{b} :{d}%
                                    },
                                    labelLine: {
                                        show: true
                                    }
                                },
                                emphasis: {
                                    shadowBlur: 10,
                                    shadowOffsetX: 0,
                                    shadowColor: 'rgba(0, 0, 0, 0.5)'
                                }
                            }
                        }]
                    };
                    myChartType.setOption(optionType); //初始化车辆类型
                    loading.hide();

                })

            })
        },
        getRandom: function() {
            var n = 1;
            var rnd = "";
            for(var i = 0; i < n; i++)
                rnd += Math.floor(Math.random() * 100);
            return rnd;
        },
        getData: function(name, callback) {
            var that = this;
            if(!name) return false;
            console.log(name)
            loading.show();
            $.getJSON('/define/getEquipStatus', {
                "carName": name
            }, function(res) {
                callback(res);
            })
        }
    }
})